<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['Time',   'Used', 'free', 'buffer'],
          ['00:30:01', 420,   68,       184],
          ['00:40:01', 420,   68,       184],
          ['00:50:01', 420,   68,       184],
          ['01:00:01', 420,   68,       184],
          ['01:10:01', 417,   71,       184],
          ['01:20:01', 417,   71,       184],
          ['01:30:02', 417,   71,       184],
          ['01:40:01', 417,   71,       184],
          ['01:50:01', 417,   71,       184],
          ['02:00:01', 418,   70,       184],
          ['02:10:01', 418,   70,       184],
          ['02:20:01', 418,   70,       184],
          ['02:30:01', 418,   70,       184],
          ['02:40:01', 418,   70,       184],
          ['02:50:01', 418,   70,       184],
          ['03:00:01', 418,   70,       184],
          ['03:10:01', 418,   70,       184],
          ['03:20:01', 418,   70,       184],
          ['03:30:01', 418,   70,       184],
          ['03:40:01', 418,   70,       184],
          ['03:50:01', 418,   70,       184],
          ['04:00:01', 418,   70,       184],
          ['04:10:01', 418,   70,       184],
          ['04:20:01', 418,   70,       184],
          ['04:30:01', 418,   70,       184],
          ['04:40:01', 418,   70,       184],
          ['04:50:01', 418,   70,       184],
          ['05:00:01', 418,   70,       184],
          ['05:10:01', 422,   66,       184],
          ['05:20:01', 422,   66,       184],
          ['05:30:01', 425,   63,       184],
          ['05:40:01', 424,   64,       185],
          ['05:50:01', 430,   58,       185],
          ['06:00:01', 437,   51,       186],
          ['06:10:01', 430,   58,       186],
          ['06:20:01', 430,   58,       186],
          ['06:30:01', 432,   56,       186],
          ['06:40:01', 431,   57,       186],
          ['06:50:01', 431,   57,       186],
          ['07:00:01', 431,   57,       186],
          ['07:10:01', 431,   57,       186],
          ['07:20:01', 431,   57,       186],
          ['07:30:01', 431,   57,       186],
          ['07:40:01', 431,   57,       186],
          ['07:50:01', 431,   57,       186],
          ['08:00:01', 428,   60,       186],
          ['08:10:01', 428,   60,       186],
          ['08:20:01', 428,   60,       186],
          ['08:30:01', 428,   60,       186],
          ['08:40:02', 428,   60,       186],
          ['08:50:01', 428,   60,       186],
          ['09:00:01', 431,   57,       186],
          ['09:10:01', 431,   57,       186],
          ['09:20:01', 442,   46,       186],
          ['09:30:01', 442,   46,       186],
          ['09:40:01', 446,   42,       186],
          ['09:50:01', 446,   42,       186],
          ['10:00:01', 440,   48,       186],
          ['10:10:01', 439,   49,       186],
          ['10:20:01', 440,   48,       186],
          ['10:30:01', 440,   48,       186],
          ['10:40:01', 438,   50,       186],
          ['10:50:01', 439,   49,       186],
          ['11:00:01', 439,   49,       186],
          ['11:10:01', 439,   49,       186],
          ['11:20:01', 438,   50,       186],
          ['11:30:01', 439,   49,       186],
          ['11:40:01', 439,   49,       186],
          ['11:50:01', 439,   49,       186],
          ['12:00:01', 439,   49,       186],
          ['12:10:01', 439,   49,       186],
          ['12:20:01', 439,   49,       186],
          ['12:30:01', 439,   49,       186],
          ['12:40:01', 439,   49,       186],
          ['12:50:01', 439,   49,       186],
          ['13:00:01', 439,   49,       186],
          ['13:10:01', 439,   49,       186],
          ['13:20:01', 439,   49,       186],
          ['13:30:01', 439,   49,       186],
          ['13:40:01', 439,   49,       186],
          ['13:50:01', 439,   49,       186],
          ['14:00:01', 439,   49,       186],
          ['14:10:01', 439,   49,       186],
          ['14:20:01', 439,   49,       186],
          ['14:30:01', 439,   49,       186],
          ['14:40:02', 439,   49,       186],
          ['14:50:01', 440,   48,       186],
          ['15:00:01', 439,   49,       187],
          ['15:10:01', 441,   47,       187],
          ['15:20:01', 441,   47,       187],
          ['15:30:01', 441,   47,       187],
          ['15:40:01', 441,   47,       187],
          ['15:50:01', 440,   48,       187],
          ['16:00:01', 440,   48,       187],
          ['16:10:01', 440,   48,       187],
          ['16:20:01', 440,   48,       187],
          ['16:30:01', 442,   46,       187],
          ['16:40:01', 442,   46,       187],
          ['16:50:01', 442,   46,       187],
          ['17:00:01', 438,   50,       187],
          ['17:10:01', 438,   50,       188],
          ['17:20:01', 438,   50,       188],
          ['17:30:01', 440,   48,       188],
          ['17:40:01', 438,   50,       188],
          ['17:50:01', 439,   49,       188],
          ['18:00:01', 439,   49,       188],
        ]);
        // Create and draw the visualization.
        var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
        ac.draw(data, {
          title : 'Memory Usage',
          isStacked: true,
          width: 600,
          height: 400,
          vAxis: {title: "MB"},
          hAxis: {title: "Time"}
        });
      }
      

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>
